<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>OpenLayers 加载佛山地图-Demo</title>
    <script src="../lib/ol4/ol4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <style type="text/css">
        #map {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            left: 0;
            top: 0;
        }
    </style>

</head>
<body>
<div id="map" class="map"></div>
<script>
    const projection = ol.proj.get('EPSG:3857');
    const projectionExtent = projection.getExtent();
    const size = ol.extent.getWidth(projectionExtent) / 256;
    console.log(projectionExtent);

    const center = [
        (528134.2439974264 + 848266.928417676) / 2,
        (2479133.132957764 + 2634523.9978181086) / 2
    ];
    console.log(center);

    const resolutions = [
        156543.34701231902,
        78271.67350615951,
        39135.83675440268,
        19567.91837587842,
        9783.95918793921,
        4891.979595292524,
        2445.989797646262,
        1222.994898823131,
        611.4974494115655,
        305.74872470578276,
        152.87436235289138,
        76.43717985352637,
        38.2185912496825,
        19.10929430192194,
        9.55464715096097,
        4.777323575480485,
        2.3886631106595546,
        1.1943315553297773,
        0.5971657776648887,
        0.2985828888324443,
        0.14929144441622216
    ];

    const matrixIds = [
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20
    ];

    const origin = [-4923200.0, 1.00021e7];

    const tileGrid = new ol.tilegrid.WMTS({
        origin: origin,
        resolutions: resolutions,
        matrixIds: matrixIds
    });

    //       http://19.128.104.232:12345/ServiceAccess/WMTS/佛山市2017年影像图（省厅17年12月下发）_WMTS_2000113/65c395ced272084b4b4c467ea23e9de8
    //       http://19.128.104.232:12345/ServiceAccess/WMTS/佛山电子地图_2018_WMTS_CGCS2000/65c395ced272084b4b4c467ea23e9de8

    const map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.WMTS({
                    name: '佛山地图',
                    url:
                        'http://19.128.104.232:12345/ServiceAccess/WMTS/佛山市2017年影像图（省厅17年12月下发）_WMTS_2000113/65c395ced272084b4b4c467ea23e9de8',
                    matrixSet: 'default',
                    format: 'image/png',
                    layer: 'TileMatrix using 0.28mm',
                    projection: projection,
                    tileGrid: tileGrid,
                    style: 'default',
                    wrapX: true
                })
            })
        ],
        target: 'map',
        view: new ol.View({
            center: center,
            projection: projection,
            zoom: 10,
            maxZoom: 20,
            minZoom: 1,
            resolutions
        })
    });
</script>
</body>
</html>
